<template>
  <div class="List">
    <el-page-header @back="goBack" content="">
    </el-page-header>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'#696969',borderColor:'#CECECE',textAlign:'center',color:'#FFFFFF'}"
        :cell-style="{background:'#696969',borderColor:'#CECECE',textAlign:'center',color:'#FFFFFF'}">
      <el-table-column label="picture">
        <template slot-scope="scope">
          <img :src="(scope.row.picturePath) ? baseUrl+scope.row.picturePath.toString().slice(1) : null" height="100"
               @click="route_to_game(scope.row)">
        </template>
      </el-table-column>
      <el-table-column label="name">
        <template slot-scope="scope">
          <div class="game_name" @click="route_to_game(scope.row)">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="price">
      </el-table-column>
      <el-table-column
          prop="releaseTime"
          label="date">
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.ListBody tr {

  display: inline-block;
  height: 100px;
  width: 100%;
  margin: 0.5%;
  padding: 0.5%;
  transition: 100ms;
}

.ListBody tr:hover {
  background-color: grey;
  border: 1px solid;
  border-color: white;
}

.ListBody tr img {
  width: 200px;
  height: 100px;
}

.ListBody tr td {
  width: 125px;
  height: 50px;
  align-content: center;
  vertical-align: middle;
}


</style>

<script>
import {select_game, search_game, select_type_game, search_type_game} from "@/api/game";
import baseUrl from "@/api/baseUrl";

export default {
  name: "List",
  mounted() {
    if (this.$route.query.name && this.$route.query.type) {
      search_type_game(this.des, this.orderBy, this.pageNum, this.pageSize, this.$route.query.name, this.$route.query.type).then(response => {
        let code = response.data.code;
        if (code == 200) {
          console.log(response.data.data.records);
          this.tableData = response.data.data.records;
        } else {
          this.$alert('连接错误');
        }
      })
    } else if (this.$route.query.name) {
      search_game(this.des, this.orderBy, this.pageNum, this.pageSize, this.$route.query.name).then(response => {
        let code = response.data.code;
        if (code == 200) {
          console.log(response.data.data.records);
          this.tableData = response.data.data.records;
        } else {
          this.$alert('连接错误');
        }
      })
    } else if (this.$route.query.type) {
      select_type_game(this.des, this.orderBy, this.pageNum, this.pageSize, this.$route.query.type).then(response => {
        let code = response.data.code;
        if (code == 200) {
          console.log(response.data.data.records);
          this.tableData = response.data.data.records;
        } else {
          this.$alert('连接错误')
        }
      })
    } else {
      select_game(this.des, this.orderBy, this.pageNum, this.pageSize).then(response => {
        let code = response.data.code;
        if (code == 200) {
          console.log(response.data.data.records)
          this.tableData = response.data.data.records;
        } else {
          this.$alert('连接错误');
        }
      })
    }
  },
  data() {
    return {
      // list data select parameters
      des: 0,
      orderBy: 'ReleasedTime',
      pageNum: 1,
      pageSize: 8,
      // end
      baseUrl: baseUrl,
      tableData: [
        {
          picturePath: require("@/assets/1.jpg"),
          name: "N与A的相爱相杀",
          price: "12",
          releaseTime: "2018/1/1",
          scores: 3,
          profile: '',
          type: [],
        },
      ]
    }
  }, methods: {
    goBack() {
      console.log('go back');
      this.$router.back()
    },
    // 游戏跳转方法
    route_to_game(item) {
      // console.log(id)
      this.$router.push({path: '/game', query: {id: item.id}})
    },
  },
}
</script>